//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router"

//引入组件
import About from '../pages/about'
import Home from '../pages/home'
import News from '../pages/news'
import Message from '../pages/message'
import Detail from '../pages/detail'
//创建一个路由
// export default new  VueRouter({
//     routes: [
//         {   name: 'guanyu',
//             path: '/about',
//             component: About
//         },
//         {
//             name: 'zhuye',
//             path: '/home',
//             component: Home,
//             children: [
//                 {
//                     name: 'xinwen',
//                     path: 'news',
//                     component: News
//                 },
//                 {
//                     name: 'xiaoxi',
//                     path: 'message',
//                     component: Message,
//                     children: [
//                         {
//                             name: 'xiangqing',
//                             // path: 'detail',
//                             path: 'detail/:id/:title',
//                             component: Detail,
//                             // props的第一种写法,值为对象, 该对象中的所有key,value都会以Props的形式传给details组件
//                             // props: {a:1, b:'hello'}

//                             // props的第二种写法, 值为布尔值, 若布尔值为真,就会把该路由组件收到的params参数, 以props的形式传给detail组件
//                             // props: true

//                             // props的第三种写法, 值为函数
//                             // props ($route) {
//                             //     return {id: $route.query.id, title: $route.query.title}
//                             // }
//                             // props ({query:{id, title}}) {
//                             //     return {id: id, title: title}
//                             // }
//                             props ({params:{id, title}}) {
//                                 return {id: id, title: title}
//                             }
//                         }
//                     ]
//                 },
//             ]
//         },
//     ]
// })

const router = new  VueRouter({
    mode: 'history',
    routes: [
        {   name: 'guanyu',
            path: '/about',
            component: About,
            meta: {isAuth: true, title: '关于'}
        },
        {
            name: 'zhuye',
            path: '/home',
            component: Home,
            meta: {title: '主页'},
            children: [
                {
                    name: 'xinwen',
                    path: 'news',
                    component: News,
                    meta: {isAuth: true, title: '新闻'},
                    // beforeEnter: (to, from, next) => {
                    //     //独享路由守卫
                    //     if(to.meta.isAuth) { //判断是否需要鉴定权限
                    //         if(localStorage.getItem('school') === 'atguigu') {
                    //             next()
                    //         } else {
                    //             alert('学校名不对,无权限查看')
                    //         }
                    //     } else {
                    //         next()
                    //     }
                    // }
                },
                {
                    name: 'xiaoxi', 
                    path: 'message',
                    component: Message,
                    meta: {isAuth: true, title: '消息'},
                    children: [
                        {
                            name: 'xiangqing',
                            // path: 'detail',
                            path: 'detail/:id/:title',
                            component: Detail,
                            meta: {title: '详情'},
                            // props的第一种写法,值为对象, 该对象中的所有key,value都会以Props的形式传给details组件
                            // props: {a:1, b:'hello'}

                            // props的第二种写法, 值为布尔值, 若布尔值为真,就会把该路由组件收到的params参数, 以props的形式传给detail组件
                            // props: true

                            // props的第三种写法, 值为函数
                            // props ($route) {
                            //     return {id: $route.query.id, title: $route.query.title}
                            // }
                            // props ({query:{id, title}}) {
                            //     return {id: id, title: title}
                            // }
                            props ({params:{id, title}}) {
                                return {id: id, title: title}
                            }
                        }
                    ]
                },
            ]
        },
    ]
})
//全局前置路由守卫————每次路由切换之前被调用，初始化的时候也会被调用
router.beforeEach((to, from, next)=>{
    console.log('@router的beforeEach被调用了')
    console.log(to ,from)
    //不调用next()每次切换都会卡住
    // if(to.name === 'xinwen' || to.name === 'xiaoxi') {
    if(to.meta.isAuth) { //判断是否需要鉴定权限
        if(localStorage.getItem('school') === 'atguigu') {
            next()
        } else {
            alert('学校名不对,无权限查看')
        }
    } else {
        next()
    }
})

//全局后置路由守卫————每次路由切换之后被调用，初始化的时候也会被调用
router.afterEach((to, from)=>{
    console.log('@router的afterEach被调用了')
    console.log(to ,from)
    document.title = to.meta.title || '硅谷系统'
})



export default router